@tooltip-prefix: ~"@{prefix}tooltip";
@tooltip-arrow: ~"@{tooltip-prefix}-arrow";
@tooltip-max-width: 250px;
@tooltip-arrow-width: 5px;
@tooltip-arrow-distance: @tooltip-arrow-width - 1+4;
@tooltip-color: darken(@gray2-color, 5%);
@bg: @dark-color;
.@{tooltip-prefix} {
  z-index: @zindex-tooltip;
  opacity: 0;
  transition: .35s cubic-bezier(.24, .22, .015, 1.56);
  transition-property:transform,opacity;
  &&-editable {
    z-index: @zindex-tooltip-edit;
  }
  .@{tooltip-prefix} {
    &-arrow {
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      border-color: transparent;
    }
    &-inner {
      max-width: @tooltip-max-width;
      text-align: left;
      text-decoration: none;
      background: @bg;
      color: @white-color;
      border-radius: @border-radius;
      // box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .2);

      &-content{
        padding: 4px 10px;
      }
    }
  }
  &.@{tooltip-prefix}-white {
    .@{tooltip-prefix} {
      &-arrow{
        &:after{
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-color: transparent;
          border-style: solid;
          content: " ";
          border-width: 6px;
          margin-left: -6px;
          z-index: 1;
        }
      }
      &-inner {
        background: @white-color;
        // border-color: @border-color;
        color: @bg;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
      }
    }
    &[x-placement^="top"] .@{tooltip-arrow} {
      border-top-color: @tooltip-color;
        &:after{
          bottom: 1px;
          border-bottom-width: 0;
          border-top-color: @white-color;
        }
    }
    &[x-placement^="right"] .@{tooltip-arrow} {
      border-right-color: @tooltip-color;
      &:after{
        left: 7px;
        top: -6px;
        border-left-width: 0;
        border-right-color: @white-color;
      }
    }
    &[x-placement^="left"] .@{tooltip-arrow} {
      border-left-color: @tooltip-color;
      &:after{
        right: 1px;
        top: -6px;
        border-right-width: 0;
        border-left-color: @white-color;
      }
    }
    &[x-placement^="bottom"] .@{tooltip-arrow} {
      border-bottom-color: @tooltip-color;
      &:after{
        top: 1px;
        border-top-width: 0;
        border-bottom-color: @white-color;
      }
    }
  }
  &[x-placement^="top"] {
    padding: @tooltip-arrow-width 0 @tooltip-arrow-distance 0;
  }
  &[x-placement^="right"] {
    padding: 0 @tooltip-arrow-width 0 @tooltip-arrow-distance;
  }
  &[x-placement^="bottom"] {
    padding: @tooltip-arrow-distance 0 @tooltip-arrow-width 0;
  }
  &[x-placement^="left"] {
    padding: 0 @tooltip-arrow-distance 0 @tooltip-arrow-width;
  }
  &[x-placement^="top"] .@{tooltip-arrow} {
    bottom: @tooltip-arrow-distance - @tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @bg;
  }
  &[x-placement="top"] .@{tooltip-arrow} {
    left: 50%;
    margin-left: -@tooltip-arrow-width;
  }
  &[x-placement="top-start"] .@{tooltip-arrow} {
    left: 16px;
  }
  &[x-placement="top-end"] .@{tooltip-arrow} {
    right: 16px;
  }
  &[x-placement^="right"] .@{tooltip-arrow} {
    left: @tooltip-arrow-distance - @tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    border-right-color: @bg;
  }
  &[x-placement="right"] .@{tooltip-arrow} {
    top: 50%;
    margin-top: -@tooltip-arrow-width;
  }
  &[x-placement="right-start"] .@{tooltip-arrow} {
    top: 8px;
  }
  &[x-placement="right-end"] .@{tooltip-arrow} {
    bottom: 8px;
  }
  &[x-placement^="left"] .@{tooltip-arrow} {
    right: @tooltip-arrow-distance - @tooltip-arrow-width;
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-left-color: @bg;
  }
  &[x-placement="left"] .@{tooltip-arrow} {
    top: 50%;
    margin-top: -@tooltip-arrow-width;
  }
  &[x-placement="bottom"] .@{tooltip-arrow} {
    left: 50%;
    margin-left: -@tooltip-arrow-width;
  }
  &[x-placement="left-start"] .@{tooltip-arrow} {
    top: 8px;
  }
  &[x-placement="left-end"] .@{tooltip-arrow} {
    bottom: 8px;
  }
  &[x-placement^="bottom"] .@{tooltip-arrow} {
    top: @tooltip-arrow-distance - @tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @bg;
  }
  &[x-placement="bottom-start"] .@{tooltip-arrow} {
    left: 16px;
  }
  &[x-placement="bottom-end"] .@{tooltip-arrow} {
    right: 16px;
  }
}

.@{tooltip-prefix}-show{
  display: inline-block;
}


&[aria-hidden=false]{
  transform: scale(1);
  opacity: 1;
}